<template>
  <div>
    <h2>我的订单</h2>
    <div class="orderList">
      <el-card class="box-card" v-for="(item, index) in tableData" :key="index">
        <div style="display: flex">
          <div style="flex: 1">
            <span style="color: #909399; font-weight: 700">日期：</span>
            <span>{{ item.datetim }}</span>
          </div>
          <div style="flex: 1">
            <span style="color: #909399; font-weight: 700">联系方式：</span>
            <span>{{ item.userId }}</span>
          </div>
          <div style="flex: 1">
            <span style="color: #909399; font-weight: 700">时长：</span>
            <span>{{ item.totaltime }}小时</span>
          </div>
          <div style="flex: 1">
            <span style="color: #909399; font-weight: 700">人数：</span>
            <span>{{ item.totalpeople }}</span>
          </div>
          <div style="flex: 1">
            <span style="color: #909399; font-weight: 700">桌数：</span>
            <span>{{ item.desk }}</span>
          </div>
        </div>
        <div style="display: flex; margin-top: 10px">
          <div style="flex: 1">
            <span style="color: #909399; font-weight: 700">定金：</span>
            <span>{{ item.subscription }}</span>
          </div>
          <div style="flex: 1">
            <span style="color: #909399; font-weight: 700">总价：</span>
            <span>{{ item.totalpay }}</span>
          </div>
          <div style="flex: 1">
            <span style="color: #909399; font-weight: 700">押金状态：</span>
            <span
              :style="
                item.subStatus != 'false' ? 'color:#67c23a' : 'color:#f56c6c'
              "
            >
              {{ item.subStatus != "false" ? "已支付" : "未支付" }}</span
            >
          </div>
          <div style="flex: 1">
            <span style="color: #909399; font-weight: 700">订单状态：</span>
            <span
              :style="
                item.payStatus != 'false' ? 'color:#67c23a' : 'color:#f56c6c'
              "
            >
              {{ item.payStatus != "false" ? "已支付" : "未支付" }}</span
            >
          </div>
          <div style="flex: 1">
            <span style="color: #909399; font-weight: 700">操作：</span>
            <!-- <el-button type="text">查看菜单</el-button> -->
            <span
              style="color: #409eff; cursor: pointer"
              @click="handleCheck(item)"
              >查看菜单</span
            >
            <span
              v-if="item.payStatus == 'false'"
              style="color: #409eff; margin-left: 10px; cursor: pointer"
              @click="addPeopleList(item.id)"
              >添加访客</span
            >
          </div>
        </div>
        <div class="tag" v-if="item.payStatus == 'false'">进行中</div>
        <div class="tag" v-else style="background-color: #f56c6c">已结束</div>
      </el-card>
    </div>
    <el-dialog
      title="确认订单"
      width="30%"
      :visible.sync="confirmDialogFormVisible"
      @close="handleClose"
    >
      <el-row style="color: #212121; font-weight: 700; padding-bottom: 15px">
        <el-col :span="8">菜名</el-col>
        <el-col :span="8">数量/份</el-col>
        <el-col :span="8">单价/元</el-col>
      </el-row>
      <div
        style="
          height: 250px;
          overflow: overlay;
          padding: 10px;
          margin: -10px;
          border: 1px solid #eee;
        "
      >
        <el-row
          v-for="(item, index) in obj.detial"
          :key="index"
          style="padding: 5px 0"
        >
          <el-col :span="8">{{ item.menuname }}</el-col>
          <el-col :span="8">x{{ item.num }}</el-col>
          <el-col :span="8">{{ item.price }}</el-col>
        </el-row>
      </div>
      <div slot="footer" class="footer">
        <div style="font-size: 20px; font-weight: 700">
          <span>总价</span>
          <span style="color: red">￥{{ obj.totalpay }}</span>
        </div>
        <div>
          <el-button @click="confirmDialogFormVisible = false">取 消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      obj: {
        datetim: "",
        totaltime: "",
        totalpeople: "",
        desk: "",
        subscription: "",
      },
      confirmDialogFormVisible: false,
      phone: sessionStorage.getItem("phone"),
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    handleCheck(item) {
      this.confirmDialogFormVisible = true;
      this.obj = item;
      this.obj.detial = this.obj.detial ? JSON.parse(this.obj.detial) : [];
      console.log(this.obj);
    },
    handleClose() {
      this.obj = {
        datetim: "",
        totaltime: "",
        totalpeople: "",
        desk: "",
        subscription: "",
      };
    },
    //前往添加访客的界面
    addPeopleList(orderId) {
      this.$router.push({
        name: "register",
        query: {
          orderId: orderId,
        },
      });
    },
    async getTableData() {
      const { data: res } = await this.$http.post(
        "/banservice/orderl/getorderlbyphone",
        {
          phone: this.phone,
        }
      );
      this.tableData = res.data.list;
    },
  },
};
</script>

<style lang="less" scoped>
.orderList {
  margin-top: 30px;
  padding-bottom: 15px;
  .box-card {
    width: 100%;
    height: 140px;
    position: relative;
    overflow: hidden;
    margin-top: 15px;

    .tag {
      padding: 5px 20px;
      background-color: #67c23a;
      border-radius: 10px;
      top: -5px;
      right: -10px;
      position: absolute;
      color: #fff;
    }
    /deep/ .el-card__body {
      height: calc(100% - 40px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>